<template>
	<div>
		<div class="banner">
				<image :src="banner" mode="widthFix"></image>
			</div>
		
			<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                        <image class="weui-media-box__thumb" :src="avatarurl" />
                    </view>
                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                        <view class="weui-media-box__title">{{title}}</view>
                        <view class="weui-media-box__desc">{{description}}</view>
                    </view>
                    <i class="iconfont">&#xe622;</i>
               </navigator>
			<scroll-view scroll-y="true" @scrolltolower="scrollLoading" class='scrollarea'>
					<ul class="listul" style="margin-top:0p;display: block;" id="goodslist">

						<li v-for="(i,index) in shoplist" :key="index">

							<div class="prodiv">
								<div class="imgdiv" style=" position:relative; z-index:5">
									<a :href="'/pages/fprod/main?id='+i.id">
										<img :src="'https://tp5.blver.cn'+i.goods_image">
									</a>
								</div>
								<a :href="'/pages/fprod/main?id='+i.id">
									<div class="proname">
										{{i.goods_title}} </div>
									<div class="prodesc">
										{{i.goods_cailiao}} </div>
								</a>
								<div class="protext">
									<div class="proprice">
										￥{{i.selling_price}}元 </div>
									<div class="addcart">
										<a :href="'/pages/fprod/main?id='+i.id">
											购买
										</a>
									</div>
								</div>
							</div>
						</li>

					</ul>
				</scroll-view>
			
	</div>
</template>

<script>
	import { requests } from "../../../static/js/network"
	export default{
		data(){
			return{
				title: '',
				description: '',
				banner: '',
				shoplist:[],
				avatarurl:'',
				noscroll: true,
				page: 1,
			}
		},
		onLoad(){
			let self = this
			self.avatarurl=wx.getStorageSync('userinfo').avatarurl
			requests({
				url: 'https://tp5.blver.cn/api/wechat/getFxStoreInfo',
				method: 'POST',
				header: {
					'content-type': 'application/json',
					'content-type': 'application/x-www-form-urlencoded' // 默认值
				},
				data: {

					session3rd: wx.getStorageSync('userinfo').session3rd
				},
				success: function(res) {
					console.log(res)
				
					self.banner=res.data.data.banner
					self.description=res.data.data.description
					self.title=res.data.data.title
					//self.content=self.classlist[0].goods_content.replace(/"\/static/g, '"https://tp5.blver.cn/static').replace(/"\/static/g, '"https://tp5.blver.cn/static').replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				}
			})
			requests({
				url: 'https://tp5.blver.cn/api/wechat/isFxGoodsList',
				method: 'POST',
				header: {
					'content-type': 'application/json',
					'content-type': 'application/x-www-form-urlencoded' // 默认值
				},
				data: {
					page: self.page,
					each: 6,
					session3rd: wx.getStorageSync('userinfo').session3rd
				},
				success: function(res) {
					console.log(res)
					self.shoplist=res.data.data
					
				}
			})
		},
		methods:{
			scrollLoading(){
				if(this.noscroll == false) {
					return
				}
				let self=this
				wx.showLoading({
					title: '玩命加载中',
				})
				requests({
				url: 'https://tp5.blver.cn/api/wechat/isFxGoodsList',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: self.page,
							each: 6,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						if(res.data.status== "error") {
								wx.showToast({
									duration: 2000,
									icon: 'none',
									title: '没有更多了',
								})

								self.noscroll = false
								return
						}
						let newarr = self.shoplist.concat(res.data.data)
						self.shoplist=newarr
						
					}
			})
			}
		}
	}
</script>

<style>
	.banner image{width: 100%;}
	.scrollarea {
		height: 100vh;
	}
	.listDiv {
		width: 100%;
		max-width: 620px;
		margin: 0px auto;
		margin-top: 0px;
		margin-bottom: 96rpx;
	}
	
	.listul {
		width: 100%;
		padding: 0px;
		margin: 0px auto;
	}
	
	.listul li {
		list-style-type: none;
		text-align: center;
		float: left;
		width: 49.5%;
		height: auto;
		background-color: #FFF
	}
	
	.listul li .prodiv {
		width: 100%;
		min-width: 96px;
		min-height: 124px;
		margin: 0px auto;
		text-align: center;
		padding-top: 4px;
		padding-bottom: 5px;
		max-width: 100%;
		max-height: none;
	}
	
	.listul li .prodiv img {
		border: 0px #CCCCCC solid;
		width: 100%;
		max-width: 100%;
		max-height: none;
		min-height: 122px;
		min-width: 94px;
	}
	
	.listul li .prodiv a {
		color: #666;
		text-decoration: none
	}
	
	.listul li .prodiv .imgdiv {
		width: 100%;
		max-width: 100%;
		/*max-width:98%;*/
		max-height: none;
		min-width: 94px;
		min-height: 122px;
		margin: 0px auto
	}
	
	.listul li .prodiv .protext {
		width: 98%;
		clear: both;
		margin: 0px auto;
		display: block;
	}
	
	.listul li .prodiv .proname {
		line-height: 22px;
		height: 22px;
		color: #333;
		font-size: 14px;
		text-align: left;
		overflow: hidden;
		padding-left: 5px;
	}
	
	.listul li .prodiv .proname a {
		color: #333;
		font-size: 14px;
		font-family: 微软雅黑;
		line-height: 22px;
	}
	
	.listul li .prodiv .prodesc {
		height: 22px;
		color: #999;
		font-size: 12px;
		text-align: left;
		overflow: hidden;
		padding-left: 5px;
	}
	
	.listul li .prodiv .prodesc a {
		color: #999;
		font-size: 14px;
		font-family: 微软雅黑;
		line-height: 22px;
	}
	
	.listul li .prodiv .proprice {
		text-align: left;
		color: #F00;
		font-size: 15px;
		margin-top: 0px;
		width: 55%;
		float: left
	}
	
	.listul li .prodiv .addcart {
		width: 40%;
		float: right;
		height: 30px;
	}
	
	.listul li .prodiv .addcart a {
		border: 1px #348B16 solid;
		padding: 3px 10px 3px 10px;
		border-radius: 3px;
		color: #348B16;
		font-size: 13px;
	}
	
	.listul li .prodiv .addico {
		width: 33%;
		float: left;
		height: 40px;
		line-height: 40px;
	}
	
	.listul li .prodiv .addico img {
		max-height: 22px;
		max-width: 22px;
		min-height: 22px;
		min-width: 22px;
		margin-top: 8px
	}
</style>